<template>
  <div class="manage">
    <h2>账号管理</h2>
    <div class="padding-l">
      <h3>用户姓名</h3>
      <div v-if="person.isset" class="el-form">
        <span class="el-span">{{person.name}}</span>
        <el-button plain @click="()=>{change(person)}">修改</el-button>
      </div>
      <el-form v-else :rules="rules" ref="person" :model="person">
        <el-form-item prop="newName">
          <el-input v-model="person.newName" placeholder="请输入新用户姓名"></el-input>
        </el-form-item>
        <el-form-item class="saveBtn">
          <el-button type="primary" @click="()=>{saveName(person)}">保存</el-button>
          <el-button type="primary" plain @click="()=>{cancel(person)}">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="padding-l">
      <h3>手机</h3>
      <div v-if="phone.isset" class="el-form">
        <span class="el-span">{{phone.name|changeName}}</span>
        <!-- <span v-if="phone.phoneValid">已验证</span>
        <span v-else style="color:red">未验证</span> -->
        <el-button plain @click="()=>{change(phone)}">修改</el-button>
      </div>
      <phoneOrMail v-else type="phone" @changeIsset="()=>{changeIsset(phone)}"
        @changePhoneMail="()=>{changePhoneMail(phone)}"></phoneOrMail>
    </div>
    <div class="padding-l">
      <h3>邮箱</h3>
      <div v-if="email.isset" class="el-form">
        <span class="el-span">{{email.name|changeName}}</span>
        <!-- <span v-if="email.mailValid">已验证</span>
        <span v-else style="color:red">未验证</span> -->
        <el-button plain @click="()=>{change(email)}">修改</el-button>
      </div>
      <phoneOrMail v-else type="mail" @changeIsset="()=>{changeIsset(email)}"
        @changePhoneMail="()=>{changePhoneMail(email)}"></phoneOrMail>
    </div>
  </div>
</template>

<script>
import { currentInfo, updateUserName, updatePassword, updateName } from '../../../api/account';
// 修改手机,邮箱组件
import phoneOrMail from './managePhoneOrMail';
import Qs from 'qs';
import { encrypt } from '../../../utils/unitFile';
export default {
  name: '',
  data () {
    // 检测密码
    var validateComfirmPwd = (rule, value, callback) => {
      if (this.password.newPwd != value) {
        callback(new Error('确认密码与新密码不一致！'));
      } else {
        callback();
      }
    };
    return {
      // 用户姓名
      person: {
        name: '',
        newName: '',
        isset: true
      },
      // 用户名
      account: {
        name: '',
        userName: '',
        isset: true
      },
      // 密码
      password: {
        name: '************',
        oldPwd: '',
        newPwd: '',
        confirmPwd: '',
        isset: true
      },
      // 手机
      phone: {
        name: '',
        phoneValid: false,
        isset: true
      },
      // 邮箱
      email: {
        name: '',
        mailValid: false,
        isset: true
      },
      rules: {
        newName: [{ required: true, message: '请输入用户名', trigger: 'change' }],
        userName: [{ required: true, message: '请输入用户名', trigger: 'change' }],

        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'change' },
          { pattern: /^[0-9a-zA-Z_]{6,20}$/, message: '密码由长度为6-20的数字、字母或下划线组成' }
        ],
        confirmPwd: [{ required: true, message: '请确认密码', trigger: 'change' }, { validator: validateComfirmPwd }]
      }
    };
  },
  mounted () {
    this.getInfo();
  },
  components: {
    phoneOrMail
  },
  methods: {
    // 获取用户信息
    getInfo () {
      currentInfo().then(data => {
        console.log(data.data);
        if (data.success) {
          this.person.name = data.data.name || '';
          this.account.name = data.data.userName || '';
          this.phone.name = data.data.phone || '';
          this.phone.phoneValid = data.data.phoneValid;
          this.email.name = data.data.mail || '';
          this.email.mailValid = data.data.mailValid;
        } else {
          this.$message.error(`${data.msg}`);
          this.$router.push({ path: '/' });
        }
      });
    },
    // 打开编辑模块
    change (option) {
      option.isset = false;
      if (option.img !== undefined) {
        console.log(1);
        this.change_img(option);
      }
    },
    // 关闭编辑模块
    cancel (option) {
      option.isset = true;
    },
    // 子组件保存成功之后关闭编辑模块
    changeIsset (option) {
      console.log(option);
      option.isset = true;
      this.getInfo();
    },
    // 保存用户姓名
    saveName (option) {
      this.$refs.person.validate(valid => {
        if (valid) {
          let query = new FormData();
          query.append('name', option.newName)
          updateName(query).then(data => {
            if (data.success) {
              this.$message.success('修改成功');
              // localStorage.setItem('ep_userName', option.userName);
              this.getInfo();
              option.isset = true;
            } else {
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          // this.$message.error('请输入账号和密码');
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 保存用户名
    saveUserName (option) {
      this.$refs.account.validate(valid => {
        if (valid) {
          let query = Qs.stringify({
            userName: option.userName
          });
          updateUserName(query).then(data => {
            if (data.success) {
              this.$message.success('修改成功');
              localStorage.setItem('ep_userName', option.userName);
              this.getInfo();
              option.isset = true;
            } else {
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          // this.$message.error('请输入账号和密码');
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 保存密码
    savePassword (option) {
      this.$refs.password.validate(valid => {
        if (valid) {
          let query = {
            oldPwd: option.oldPwd ? encrypt(option.oldPwd) : '',
            pwd: encrypt(option.newPwd),
            confirmPwd: encrypt(option.confirmPwd)
          };
          updatePassword(query).then(data => {
            if (data.success) {
              this.$message.success('修改成功');
              option.isset = true;
            } else {
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          // this.$message.error('请输入账号和密码');
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  filters: {
    // 隐藏手机邮箱中简4位
    changeName (val) {
      let str = '';
      for (let i = 0; i < val.length; i++) {
        if (i > 2 && i < 7) {
          str += '*';
        } else {
          str += val[i];
        }
      }
      return str;
    }
  }
};
</script>

<style scoped>
.manage {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    padding: 24px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.manage h2 {
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 28px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    padding-bottom: 13px;
    border-bottom: 2px solid rgba(232, 232, 232, 1);
    padding-left: 44px;
}
.manage .padding-l {
    padding-left: 44px;
    margin-top: 26px;
}
.manage h3 {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.manage h3::after {
    display: block;
    content: '';
    border: 1px solid rgba(24, 147, 252, 1);
    width: 28px;
    opacity: 1;
    border-radius: 2px;
    margin-top: 4px;
}
.el-form {
    margin-top: 20px;
    position: relative;
    margin-bottom: 26px;
}
.el-form-item {
    width: 274px;
}
.el-form-item /deep/ .el-input__inner {
    width: 274px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
    padding-left: 24px;
    box-sizing: border-box;
}
.el-form .el-form-item /deep/ .el-form-item__error {
    left: 286px;
    top: 13px;
    width: 130px;
}
.el-form-item .el-form-item__content img {
    width: 98px;
    height: 40px;
    background: rgba(239, 239, 239, 1);
    opacity: 1;
}
.el-form-item .captchaCode {
    vertical-align: top;
    margin-right: 15px;
    display: inline-block;
    width: 156px;
}
.el-form-item .captchaCode /deep/ .el-input__inner {
    width: 156px;
}
.saveBtn {
    position: absolute;
    top: 8px;
    right: 195px;
    width: 250px;
    height: 24px;
}
.saveBtn /deep/ .el-form-item__content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.saveBtn .el-button {
    line-height: 0;
    width: 94px;
    height: 24px;
    opacity: 1;
    margin: 0;
}
.el-span {
    display: inline-block;
    vertical-align: top;
    width: 274px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    padding-left: 24px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    box-sizing: border-box;
}
span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-right: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(252, 164, 24, 1);
}
.el-button {
    line-height: 0;
    margin-right: 332px;
    margin-top: 8px;
    float: right;
    width: 94px;
    height: 24px;
    border: 1px solid rgba(204, 204, 204, 1);
    opacity: 1;
}
</style>